<template>
    <div>
        <h1>父组件</h1>
        <Son></Son>
    </div>
</template>

<script setup>
/**
 * 通过 provide 和 inject 函数来实现跨级组件通信
 * 使用：
    * 1、导入provide函数
    * 2、定义数据和方法
    * 3、使用provide函数向后代传递数据和方法
    * 4、在后代组件中使用inject函数接收数据和方法
 * 语法结构：
    * provide('要传递给后代的数据和方法名',数据和方法)
    * const 变量 = inject('数据和方法名')
 */
import Son from './components/Son.vue';
// 导入provide函数
import { ref, provide } from 'vue'
// 定义数据和方法
let username = ref('张三')
const changeName = () => {
    username.value = '张三丰'
}
// 使用provide函数向后代传递数据和方法
provide('uname', username)
provide('change-name', changeName)
</script>

<style lang="scss" scoped></style>